<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="产品编号" prop="productNum">
      <el-input v-model="ruleForm.productNum"></el-input>
    </el-form-item>
    <el-form-item label="产品名称" prop="productName">
      <el-input v-model="ruleForm.productName"></el-input>
    </el-form-item>
    <el-form-item label="出发城市" prop="cityName">
      <el-input v-model="ruleForm.cityName"></el-input>
    </el-form-item>
    <el-form-item label="产品价格" prop="productPrice">
      <el-input v-model.number="ruleForm.productPrice"></el-input>
    </el-form-item>
    <el-form-item label="订单状态" prop="productStatus">
      <el-select v-model="ruleForm.productStatus" placeholder="请选择活动区域">
        <el-option label="开启" value="1"></el-option>
        <el-option label="关闭" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="出发时间" required>
      <el-form-item prop="departureTime">
        <el-date-picker
          v-model="ruleForm.departureTime"
          type="datetime"
          placeholder="选择日期时间"
          format="yyyy-mm-dd hh:MM"
          value-format="timestamp"
        ></el-date-picker>
      </el-form-item>
    </el-form-item>

    <el-form-item label="其他信息" prop="productDesc">
      <el-input type="textarea" v-model="ruleForm.productDesc" :rows="4"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 请求
import { addGood } from '@/network/addGoodRequest.js'

export default {
  data() {
    return {
      ruleForm: {
        productNum: '',
        productName: '',
        cityName: '',
        productPrice: '',
        productStatus: '',
        departureTime: '',
        productDesc: ''
      },
      rules: {
        productNum: [
          { required: true, message: '请输入产品编号', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        productName: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
        cityName: [{ required: true, message: '请填写出发城市', trigger: 'blur' }],
        productPrice: [{ required: true, message: '请填写产品价格', trigger: 'blur' }],
        productStatus: [{ required: true, message: '请选择产品状态', trigger: 'change' }],
        departureTime: [{ required: true, message: '请选择出发日期', trigger: 'change' }],
        productDesc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      }
    }
  },
  methods: {
    /**
     * 提交表单
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid)
        console.log(this.ruleForm)
        if (!valid) {
          this.$message({
            showClose: true,
            message: '添加信息填写完整',
            type: 'error'
          })
          return
        }
        this.requestAddProduct(this.ruleForm)
      })
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 添加商品接口
     */
    async requestAddProduct(form) {
      const { meta } = await addGood(form)
      if (meta.status !== 200) {
        return this.$message({
          showClose: true,
          message: meta.msg,
          type: 'error'
        })
      }
      // 成功创建
      this.$router.push({path: '/goods'})
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 10px;
  .el-input {
    width: 280px;
  }
}
</style>

